<template>
  <div class="mobile-preview">
    <div class="phone-frame" v-if="isVisible">
      <div class="screen" :style="`background-color:${backgroundColor}`">
        <!-- 动态渲染传入的组件 -->
        <component v-if="props.contentComponent" :is="props.contentComponent" :data="props.componentProps" />
      </div>
    </div>

    <el-tooltip
      effect="dark"
      placement="left-start"
      :content="isVisible?'关闭手机预览':'开启手机预览'"
    ><el-button :icon="isVisible?'CircleCloseFilled':'SwitchButton'" :type="isVisible?'danger':'success'"  circle @click="togglePreview"/>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义 props
const props = defineProps({
  // 传入的组件（可以是组件定义、异步组件、或组件注册名）
  contentComponent: {
    type: [Object, Function], // Object: 同步组件；Function: 异步组件或函数式组件
    required: false,
    default: null
  },
  // 传递给组件的 props
  componentProps: {
    type: Object,
    required: false,
    default: () => ({})
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    required: false,
    default: '#ffffff'
  }
});

// 控制预览是否显示
const isVisible = ref(true);

// 切换预览显示状态
const togglePreview = () => {
  isVisible.value = !isVisible.value;
};
</script>

<style scoped>
/* 整个手机预览组件的容器样式 */
.mobile-preview {
  position: fixed;           /* 固定定位，始终显示在视窗中 */
  top: 50%;                  /* 垂直居中：从顶部 50% 位置开始 */
  right: 20px;               /* 距离浏览器右侧 20px */
  transform: translateY(-50%); /* 向上移动自身高度的 50%，实现垂直居中 */
  z-index: 1000;             /* 置于最上层，避免被其他元素遮挡 */
  display: flex;
  flex-direction: column;    /* 垂直排列子元素（标题、手机、按钮） */
  align-items: center;       /* 水平居中对齐 */
}

/* 手机外框样式 */
.phone-frame {
  max-width: 300px;              /* 手机宽度 */
  width: 300px;
  height: 600px;             /* 手机高度（模拟常见手机比例） */
  border-radius: 40px;       /* 四角大圆角，模拟现代手机 */
  background-color: #f0f0f0; /* 背景色（银色边框感） */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */
  overflow: hidden;          /* 隐藏屏幕内容溢出部分 */
  margin-bottom: 10px;       /* 与下方按钮留出间距 */
  border: 8px solid #333;    /* 黑色粗边框，模拟手机物理边框 */
  position: relative;        /* 为内部元素提供定位上下文 */
}

/* 手机屏幕内容区域 */
.screen {
  width: 100%;               /* 占满 phone-frame 的宽度 */
  height: 100%;              /* 占满 phone-frame 的高度 */
  background-color: white;   /* 白色背景，模拟屏幕 */
  font-size: 16px;           /* 基础字体大小 */
  color: #333;               /* 文字颜色 */
  box-sizing: border-box;    /* 盒模型包含 padding 和 border */
  overflow: auto;            /* 内容超出时可滚动（重要！） */
  /* 注意：不要使用 flex + center，否则会干扰 v-html 的正常布局 */
}
/* 隐藏滚动条，启用滚动 */
.screen {
  overflow: scroll; /* 或者 overflow: auto */
}

/* 针对 WebKit 浏览器隐藏滚动条 */
.screen::-webkit-scrollbar {
  display: none;
}

</style>
